Sign in Start building

Create

Tools

Tails
Blocks

Account

Free & open source

On GitHub

Resources

Community

Start building Sign in

Platform

Open Source

Resources

Steep

serif calm over a watercolour haze

SaaS Light light editorial airy elegant minimal gradient Built with Next.js, Tailwind CSS

A white, almost weightless analytics site where a single high-contrast serif does all the emotional work. Oversized Signifier headlines sit centred in deep whitespace above a soft, airbrushed peach-to-lilac gradient wash; around them, product UI fragments (metric cards, line charts, an AI prompt box) float in at the page edges like cropped screenshots. Everything else is grayscale and quiet — grey nav links, a single black pill CTA, light grey panels — so the serif and the gradient carry all the personality.

Technically it's a two-family system: Signifier at 64–100px with tight tracking (-0.96px to -2.5px) and 1.0–1.3 line heights for display, Söhne at 16–22px/1.35–1.5 for everything else, in weights 400–500 only. Surfaces step through #ffffff → #fafafb → #f7f7f8 → #f2f2f3 with no visible borders; depth comes from a 1px oklab hairline ring plus a wide, low-opacity drop shadow (0 8px 40px rgba(0,0,0,.1)). Radii are generous and consistent — 16/20/24px on cards, fully rounded pills on buttons and badges — and tinted accent cards (#fbe1d1 peach, #d3e3fc periwinkle) appear sparingly to break the grey. Sections are separated by 96–180px of vertical air inside a 1360px container.

https://steep.app

Colors

Click a swatch to copy

Typography

display

Signifier

400 · falls back to Spectral, Source Serif 4, Georgia, serif

High-contrast didone-ish serif used at a single weight (400) for every headline, hero word and card title. Italic is used for emphasis words ('Built for finance'). Never used below 36px, never bolded.
body

Sohne

400 · 430 · 450 · 480 · 500 · falls back to Inter, Helvetica Neue, Arial, sans-serif

Grotesk workhorse for nav, buttons, body, labels and UI chrome. The in-between weights (430/450/480) are used to nudge optical weight — treat 400 as body, 430 for buttons/subheads, 500 as the heaviest label weight.
mono

ui-monospace

400 · falls back to SF Mono, Menlo, monospace

System mono, used only inside code/terminal screenshots and API snippets in the changelog.

Display

100px / 1.05

400 · -0.025em

Steep

H1

64px / 1.0

400 · -0.015em

Steep

H2

40px / 1.1

400

Steep

H3

36px / 1.07

400 · -0.018em

Serif calm over a watercolour haze

Lead

22px / 1.5

400

The quick brown fox jumps over the lazy dog

Subhead

20px / 1.35

500

The quick brown fox jumps over the lazy dog

Body

18px / 1.39

400

The quick brown fox jumps over the lazy dog

UI / Nav

16px / 24px

400

The quick brown fox jumps over the lazy dog

Caption

14px / 1.4

430

The quick brown fox jumps over the lazy dog

Spacing & Shape

Spacing

Base unit: 4px
Density: spacious
Container: 1360px
Section gap: 128px (96px on narrow, up to 180px between major chapters)
Card padding: 32px for tinted/feature cards, 48px for large grey panels, 16px for floating UI cards

4

8

12

16

20

24

32

48

64

80

128

160

Radius

Buttons, pills, badges, avatars, announcement bar 9999px
Floating UI / product cards 12px
Large feature panels 16px
Chat & prompt surfaces 20px
Tinted accent cards, dark showcase blocks 24px
Table cells, tags, inline chips 6px

Shadows

hairline Resting state of small chips, tabs and the announcement pill — a ring rather than a shadow.

0 0 0 1px oklab(0 0 0 / 0.05), 0 1px 1px rgba(0,0,0,0.05)

float-sm Small floating product cards (Activation, Registrations) overlapping the hero gradient.

0 0 0 1px oklab(0 0 0 / 0.05), 0 4px 24px rgba(0,0,0,0.08)

float-lg Large app-screenshot panels and the AI prompt box; the signature depth cue.

0 0 0 1px oklab(0 0 0 / 0.05), 0 8px 40px rgba(0,0,0,0.10)

hero-drop Dark product mockups sitting on light backgrounds in product/semantic sections.

0 25px 50px -12px rgba(0,0,0,0.25)

avatar-ring White halo around overlapping avatar bubbles and cursor chips.

0 0 0 4px #ffffff

Components

Live previews rendered from recipes

Steep ProductPricingChangelogDocs Get started

Buttons

Inputs

Tags

New SaaS light New SaaS light

Card

Everything in one ledger

Reconcile every account overnight and close the month in an afternoon instead of a fortnight.

Get started

Primary CTA (black pill) — Hero and nav 'Get started'. In the 64px nav it shrinks to 10px 18px / 16px. Always sits left of a text-only secondary action with 16–24px gap.
Secondary action (bare text) — 'Book a demo' is unstyled text next to the pill — no border, no fill. On mobile it becomes a filled #f2f2f3 pill at full width.
Ghost pill / filter tab — Active nav item, 'All product updates' link-button and category filters. Inactive filters are plain #777b86 text with no background.
Announcement bar — Centred above the hero headline; bell icon with a red dot on the left, right arrow → on the right, 8px gaps.
Feature panel — Flat, borderless, no shadow. Title in Söhne 26px/450 at the top, illustration in the middle, 18px #777b86 copy at the bottom. The lead card in a row may swap to #fbe1d1 with 24px radius and 32px padding.
Floating product card — Cropped metric widgets that bleed off the viewport edges around the hero. Keep them partially off-canvas — the crop is the point.
Prompt input — 'Ask anything…' placeholder in #a3a6af, small grey icon row bottom-left, 36px circular #121212 send button with a white ↑ bottom-right.
Top navigation — Fixed, 64px tall, fully transparent with no border or backdrop blur — it floats over the gradient. Three zones: wordmark+glyph left, four centred links with 40px gaps, 'Book a demo' text + black pill right.

Do / Don't

Set every headline in Signifier 400 only — scale it up rather than bolding it, and tighten tracking to -0.015em to -0.025em above 60px.
Keep the nav transparent and borderless so the hero gradient runs under it.
Use the gradient wash sparingly: hero backdrops only, always with grain and always under black type at full contrast.
Crop product UI cards at the viewport edge so they read as glimpses of a live app, not as framed screenshots.
Build depth with the 1px 5% ring plus a wide soft shadow (0 8px 40px rgba(0,0,0,.1)) instead of visible borders.
Pair exactly one filled black pill with one bare-text secondary action in every CTA group.
Let sections breathe: 128px minimum between chapters, 48px padding inside large grey panels.

Don't set body copy, nav links or buttons in the serif — Söhne owns everything under 28px.
Don't add 1px grey outlines to cards; the system uses fills and rings, and only section dividers get a visible #ececec rule.
Don't introduce saturated brand colour; #fbe1d1 and #d3e3fc are the only tints, and #2f6fe5 is reserved for links and in-product UI.
Don't use drop shadows on flat feature panels — only on elements that float over another surface.
Don't crowd the hero: no more than one line of lead copy per 62 characters and never more than two headline lines.
Don't use sharp corners or radii under 6px; nothing in this system is square.
Don't colourize photography — customer imagery stays black and white.

Screens

Steep: AI analytics for faster insights and zero chaos — Steep: AI analytics for faster insights and zero chaos /

API, MCP and code updates | Steep — API, MCP and code updates | Steep /changelog/entities-api-mcp

Explore and analyze | Steep — Explore and analyze | Steep /product

Customer stories | Steep — Customer stories | Steep /customers

Pricing | Steep — Pricing | Steep /pricing

Mobile view — Mobile 390×844

Mobile navigation open — Mobile navigation menu open

Steep — Design Reference

serif calm over a watercolour haze

Source: https://steep.app
Theme: light
Category: SaaS
Mood: light, editorial, airy, elegant, minimal, gradient
Captured: 2026-10-20

Overview

A white, almost weightless analytics site where a single high-contrast serif does all the emotional work. Oversized Signifier headlines sit centred in deep whitespace above a soft, airbrushed peach-to-lilac gradient wash; around them, product UI fragments (metric cards, line charts, an AI prompt box) float in at the page edges like cropped screenshots. Everything else is grayscale and quiet — grey nav links, a single black pill CTA, light grey panels — so the serif and the gradient carry all the personality.

Technically it's a two-family system: Signifier at 64–100px with tight tracking (-0.96px to -2.5px) and 1.0–1.3 line heights for display, Söhne at 16–22px/1.35–1.5 for everything else, in weights 400–500 only. Surfaces step through #ffffff → #fafafb → #f7f7f8 → #f2f2f3 with no visible borders; depth comes from a 1px oklab hairline ring plus a wide, low-opacity drop shadow (0 8px 40px rgba(0,0,0,.1)). Radii are generous and consistent — 16/20/24px on cards, fully rounded pills on buttons and badges — and tinted accent cards (#fbe1d1 peach, #d3e3fc periwinkle) appear sparingly to break the grey. Sections are separated by 96–180px of vertical air inside a 1360px container.

Tokens — Colors

Name	Value	Token	Role
Paper White	`#ffffff`	`--color-bg-base`	Page background and the fill of floating product cards; dominant surface across every page.
Fog	`#fafafb`	`--color-surface-1`	Barely-there tint for wide section bands and the top of hero gradients.
Panel Grey	`#f7f7f8`	`--color-surface-2`	Default card and feature-panel fill (48px padding, 16px radius); also the secondary button fill.
Chip Grey	`#f2f2f3`	`--color-surface-3`	Pills, announcement bar, active nav tab background, pricing table zebra rows.
Ink	`#000000`	`--color-text-primary`	Headlines, nav links and body copy; the only text colour at full strength.
Carbon	`#121212`	`--color-bg-inverse`	Full-bleed dark sections (semantic platform) and the fill of the primary black pill CTA.
Graphite	`#17191c`	`--color-text-on-dark`	Text and UI elements inside dark sections; a hair warmer than pure black.
Slate Grey	`#777b86`	`--color-text-muted`	Subheads, footer links, table labels, chart axis labels — the standard secondary text tone.
Mist Grey	`#a3a6af`	`--color-text-faint`	Tertiary metadata, placeholder text in the AI prompt field, disabled states.
Blush Peach	`#fbe1d1`	`--color-accent-warm`	Tinted feature card background ('Built on metrics') and the warm pole of the hero gradient.
Periwinkle Data	`#d3e3fc`	`--color-accent-cool`	Customer-story section band and the Region/metric widget surfaces in product screenshots.
Signal Blue	`#2f6fe5`	`--color-link-active`	Inline links, selected-text highlight and focus rings inside product UI.
Clay Brown	`#5d2a1a`	`--color-accent-ink`	Text and ring stroke inside peach-tinted cards and the Registrations donut.
Hairline	`#ececec`	`--color-border-subtle`	Divider rules between sections and table rows; near-invisible, 1px only.

Semantic roles

Role	Value
background	`#ffffff`
surface	`#f7f7f8`
surface raised	`#ffffff`
border	`#ececec`
text	`#000000`
text muted	`#777b86`
primary	`#121212`
primary text	`#ffffff`
accent	`#fbe1d1`

Tokens — Typography

Display: Signifier (400) — fallbacks: Spectral, Source Serif 4, Georgia, serif. High-contrast didone-ish serif used at a single weight (400) for every headline, hero word and card title. Italic is used for emphasis words ('Built for finance'). Never used below 36px, never bolded.
Body: Sohne (400, 430, 450, 480, 500) — fallbacks: Inter, Helvetica Neue, Arial, sans-serif. Grotesk workhorse for nav, buttons, body, labels and UI chrome. The in-between weights (430/450/480) are used to nudge optical weight — treat 400 as body, 430 for buttons/subheads, 500 as the heaviest label weight.
Mono: ui-monospace (400) — fallbacks: SF Mono, Menlo, monospace. System mono, used only inside code/terminal screenshots and API snippets in the changelog.

Role	Size	Line height	Weight	Letter spacing	Family
Display	100px	1.05	400	-0.025em	display
H1	64px	1.0	400	-0.015em	display
H2	40px	1.1	400	0	display
H3	36px	1.07	400	-0.018em	display
Lead	22px	1.5	400	0	body
Subhead	20px	1.35	500	0	body
Body	18px	1.39	400	0	body
UI / Nav	16px	24px	400	0	body
Caption	14px	1.4	430	0	body

Tokens — Spacing & Layout

Base unit: 4px
Density: spacious
Container max width: 1360px
Section gap: 128px (96px on narrow, up to 180px between major chapters)
Card padding: 32px for tinted/feature cards, 48px for large grey panels, 16px for floating UI cards
Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px, 64px, 80px, 128px, 160px

Tokens — Radius

Element	Value
Buttons, pills, badges, avatars, announcement bar	9999px
Floating UI / product cards	12px
Large feature panels	16px
Chat & prompt surfaces	20px
Tinted accent cards, dark showcase blocks	24px
Table cells, tags, inline chips	6px

Tokens — Shadows

Name	Value	Usage
hairline	`0 0 0 1px oklab(0 0 0 / 0.05), 0 1px 1px rgba(0,0,0,0.05)`	Resting state of small chips, tabs and the announcement pill — a ring rather than a shadow.
float-sm	`0 0 0 1px oklab(0 0 0 / 0.05), 0 4px 24px rgba(0,0,0,0.08)`	Small floating product cards (Activation, Registrations) overlapping the hero gradient.
float-lg	`0 0 0 1px oklab(0 0 0 / 0.05), 0 8px 40px rgba(0,0,0,0.10)`	Large app-screenshot panels and the AI prompt box; the signature depth cue.
hero-drop	`0 25px 50px -12px rgba(0,0,0,0.25)`	Dark product mockups sitting on light backgrounds in product/semantic sections.
avatar-ring	`0 0 0 4px #ffffff`	White halo around overlapping avatar bubbles and cursor chips.

Components

Primary CTA (black pill) (button)

Property	Value
background	`#121212`
color	`#ffffff`
border	`none`
radius	`9999px`
padding	`14px 28px`
font size	`18px`
font weight	`430`
shadow	`none`
hover	`background #000000; subtle opacity/scale ease 150ms`

Hero and nav 'Get started'. In the 64px nav it shrinks to 10px 18px / 16px. Always sits left of a text-only secondary action with 16–24px gap.

Secondary action (bare text) (button)

Property	Value
background	`transparent`
color	`#000000`
border	`none`
radius	`0`
padding	`4px 0`
font size	`18px`
font weight	`400`
shadow	`none`
hover	`color #777b86`

'Book a demo' is unstyled text next to the pill — no border, no fill. On mobile it becomes a filled #f2f2f3 pill at full width.

Ghost pill / filter tab (badge)

Property	Value
background	`#f2f2f3`
color	`#000000`
border	`none`
radius	`9999px`
padding	`8px 16px`
font size	`16px`
font weight	`400`
shadow	`none`
hover	`background #ececec`

Active nav item, 'All product updates' link-button and category filters. Inactive filters are plain #777b86 text with no background.

Announcement bar (badge)

Property	Value
background	`#f7f7f8`
color	`#000000`
border	`none`
radius	`9999px`
padding	`12px 20px`
font size	`16px`
font weight	`400`
shadow	`0 0 0 1px oklab(0 0 0 / 0.05), 0 1px 1px rgba(0,0,0,0.05)`
hover	`background #f2f2f3`

Centred above the hero headline; bell icon with a red dot on the left, right arrow → on the right, 8px gaps.

Feature panel (card)

Property	Value
background	`#f7f7f8`
color	`#000000`
border	`none`
radius	`16px`
padding	`48px`
font size	`18px`
font weight	`400`
shadow	`none`
hover	`none`

Flat, borderless, no shadow. Title in Söhne 26px/450 at the top, illustration in the middle, 18px #777b86 copy at the bottom. The lead card in a row may swap to #fbe1d1 with 24px radius and 32px padding.

Floating product card (card)

Property	Value
background	`#ffffff`
color	`#000000`
border	`none`
radius	`12px`
padding	`16px`
font size	`14px`
font weight	`430`
shadow	`0 0 0 1px oklab(0 0 0 / 0.05), 0 4px 24px rgba(0,0,0,0.08)`
hover	`none`

Cropped metric widgets that bleed off the viewport edges around the hero. Keep them partially off-canvas — the crop is the point.

Prompt input (input)

Property	Value
background	`#ffffff`
color	`#000000`
border	`none`
radius	`20px`
padding	`16px 20px`
font size	`16px`
font weight	`400`
shadow	`0 0 0 1px oklab(0 0 0 / 0.05), 0 8px 40px rgba(0,0,0,0.10)`
hover	`ring tightens to rgba(0,0,0,0.12)`

'Ask anything…' placeholder in #a3a6af, small grey icon row bottom-left, 36px circular #121212 send button with a white ↑ bottom-right.

Top navigation (nav)

Property	Value
background	`transparent`
color	`#000000`
border	`none`
radius	`0`
padding	`0 32px`
font size	`16px`
font weight	`400`
shadow	`none`
hover	`link background #f2f2f3 pill`

Fixed, 64px tall, fully transparent with no border or backdrop blur — it floats over the gradient. Three zones: wordmark+glyph left, four centred links with 40px gaps, 'Book a demo' text + black pill right.

Layout

Single centred column inside a 1360px container with generous side gutters. Heroes are symmetrically centred: announcement pill → 64–100px serif headline (2 lines, manual breaks) → 22px grey lead (max ~62ch) → button pair, then the product imagery enters. Content sections alternate between full-bleed tinted bands (#d3e3fc customer stories, #121212 semantic platform) and white sections with 128–160px vertical padding. Feature rows are 3-up equal cards with 24–32px gaps; the changelog uses a two-column split (sticky date + title left, wide screenshot right) divided by a 1px #ececec rule. Hero decoration deliberately breaks the grid — UI cards are anchored to viewport edges and clipped.

Imagery

Two distinct registers. First, soft airbrushed mesh gradients (peach #fbe1d1 → lilac → mint → white) rendered with visible film grain, used as hero backdrops behind the serif type. Second, high-fidelity product UI: light app screenshots with blue/coral charts, avatar bubbles, named cursors and chat bubbles, plus dark terminal mockups for API content. Photography is strictly black-and-white, 16:9, documentary-style (people on bikes, office interiors) and lives inside customer-story cards. Spot illustrations are loose grey line drawings of 3D objects (speaker, gloves, rocket) sitting inside tinted feature cards. Customer logos are flat monochrome in a single centred row.

Motion

Restrained and functional. Hero gradients drift slowly; floating UI cards and cursor chips fade/translate in with short staggered offsets on load. Hover is limited to background tint swaps on nav pills and link colour shifts to #777b86 — 150–200ms ease-out, no scale bounce. Sections reveal with a short opacity+8px rise on scroll. The arrow in '→' links nudges 2–4px right on hover.

Responsive

Below ~900px the nav collapses to wordmark + grey 'Get started' pill + a hamburger; tapping it opens a full-screen white overlay with an X top-right, five primary links at ~28px Söhne in near-black, a two-column secondary link grid at ~18px in #777b86, and two stacked full-width pill buttons pinned to the bottom (black 'Get started' over grey #f2f2f3 'Book a demo'). The hero stays centred but the display serif drops to roughly 56–64px with the lead at 20–22px, and the two CTAs sit side by side at larger phone widths or stack full-width below that. The decorative floating cards stop being edge-anchored and instead flow into a cropped, overlapping stack under the fold. Section padding compresses from 128–160px to 64–80px, feature rows become a single column with 16px gaps, and horizontal gutters go to 20–24px.

Do

Set every headline in Signifier 400 only — scale it up rather than bolding it, and tighten tracking to -0.015em to -0.025em above 60px.
Keep the nav transparent and borderless so the hero gradient runs under it.
Use the gradient wash sparingly: hero backdrops only, always with grain and always under black type at full contrast.
Crop product UI cards at the viewport edge so they read as glimpses of a live app, not as framed screenshots.
Build depth with the 1px 5% ring plus a wide soft shadow (0 8px 40px rgba(0,0,0,.1)) instead of visible borders.
Pair exactly one filled black pill with one bare-text secondary action in every CTA group.
Let sections breathe: 128px minimum between chapters, 48px padding inside large grey panels.

Don't

Don't set body copy, nav links or buttons in the serif — Söhne owns everything under 28px.
Don't add 1px grey outlines to cards; the system uses fills and rings, and only section dividers get a visible #ececec rule.
Don't introduce saturated brand colour; #fbe1d1 and #d3e3fc are the only tints, and #2f6fe5 is reserved for links and in-product UI.
Don't use drop shadows on flat feature panels — only on elements that float over another surface.
Don't crowd the hero: no more than one line of lead copy per 62 characters and never more than two headline lines.
Don't use sharp corners or radii under 6px; nothing in this system is square.
Don't colourize photography — customer imagery stays black and white.

Agent prompt

Build a light, airy SaaS marketing page in the Steep style: pure #ffffff base with grey surface steps #fafafb / #f7f7f8 / #f2f2f3, black #000000 text, #777b86 for all secondary copy, and #121212 for the inverse (dark full-bleed sections and the single primary CTA). Typography is two families: Signifier (fallback Spectral/Source Serif 4, weight 400 only) for every headline — Display 100px/1.05 at -0.025em, H1 64px/1.0, H3 36px/1.07 at -0.018em, italic allowed for one emphasis word — and Söhne (fallback Inter) weights 400/430/450/500 for lead 22px/1.5, body 18px/1.39, UI and nav 16px/24px, caption 14px. Layout: 1360px max container, centred heroes (announcement pill → two-line serif headline → grey 22px lead → CTA pair), 128–160px between sections, 4px base spacing with steps 4/8/12/16/24/32/48/80/128. Radii: 9999px for all buttons, badges, avatars and the announcement bar; 12px floating UI cards; 16px large grey panels (48px padding); 20px prompt surfaces; 24px tinted cards (32px padding). Primary button = #121212 fill, white text, 14px 28px, 18px/430; secondary = plain black text, no border. Nav is fixed, 64px, fully transparent, no border or blur, centred links with pill hover (#f2f2f3). Depth comes from a 1px oklab(0 0 0 /0.05) ring plus 0 4px 24px rgba(0,0,0,.08) or 0 8px 40px rgba(0,0,0,.10) — never visible borders. The hero sits on a grainy airbrushed mesh gradient (peach #fbe1d1 → lilac → mint → white) with cropped white product cards (metric tiles, line charts, an 'Ask anything…' prompt box with a black circular ↑ button) anchored half-off the viewport edges. Use #d3e3fc for a customer-story band and #121212 for one dark showcase section; photography is strictly black and white; illustrations are loose grey line art inside tinted cards. Motion is 150–200ms ease-out opacity and small translate only. On mobile: hamburger opens a full-screen white menu with 28px links, grey secondary grid and two stacked full-width pills at the bottom; headline drops to ~56px, gutters to 20px, sections to 64–80px.

CSS custom properties

/* Steep — CSS custom properties. Generated from style.json */
:root {
  /* Palette */
  --color-bg-base: #ffffff; /* Page background and the fill of floating product cards; dominant surface across every page. */
  --color-surface-1: #fafafb; /* Barely-there tint for wide section bands and the top of hero gradients. */
  --color-surface-2: #f7f7f8; /* Default card and feature-panel fill (48px padding, 16px radius); also the secondary button fill. */
  --color-surface-3: #f2f2f3; /* Pills, announcement bar, active nav tab background, pricing table zebra rows. */
  --color-text-primary: #000000; /* Headlines, nav links and body copy; the only text colour at full strength. */
  --color-bg-inverse: #121212; /* Full-bleed dark sections (semantic platform) and the fill of the primary black pill CTA. */
  --color-text-on-dark: #17191c; /* Text and UI elements inside dark sections; a hair warmer than pure black. */
  --color-text-muted: #777b86; /* Subheads, footer links, table labels, chart axis labels — the standard secondary text tone. */
  --color-text-faint: #a3a6af; /* Tertiary metadata, placeholder text in the AI prompt field, disabled states. */
  --color-accent-warm: #fbe1d1; /* Tinted feature card background ('Built on metrics') and the warm pole of the hero gradient. */
  --color-accent-cool: #d3e3fc; /* Customer-story section band and the Region/metric widget surfaces in product screenshots. */
  --color-link-active: #2f6fe5; /* Inline links, selected-text highlight and focus rings inside product UI. */
  --color-accent-ink: #5d2a1a; /* Text and ring stroke inside peach-tinted cards and the Registrations donut. */
  --color-border-subtle: #ececec; /* Divider rules between sections and table rows; near-invisible, 1px only. */

  /* Semantic roles */
  --background: #ffffff;
  --surface: #f7f7f8;
  --surface-raised: #ffffff;
  --border: #ececec;
  --text: #000000;
  --text-muted: #777b86;
  --primary: #121212;
  --primary-text: #ffffff;
  --accent: #fbe1d1;

  /* Typography */
  --font-display: Signifier, Spectral, 'Source Serif 4', Georgia, serif;
  --font-body: Sohne, Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --text-display: 100px;
  --text-display--line-height: 1.05;
  --text-display--letter-spacing: -0.025em;
  --text-display--font-weight: 400;
  --text-h1: 64px;
  --text-h1--line-height: 1.0;
  --text-h1--letter-spacing: -0.015em;
  --text-h1--font-weight: 400;
  --text-h2: 40px;
  --text-h2--line-height: 1.1;
  --text-h2--letter-spacing: 0;
  --text-h2--font-weight: 400;
  --text-h3: 36px;
  --text-h3--line-height: 1.07;
  --text-h3--letter-spacing: -0.018em;
  --text-h3--font-weight: 400;
  --text-lead: 22px;
  --text-lead--line-height: 1.5;
  --text-lead--letter-spacing: 0;
  --text-lead--font-weight: 400;
  --text-subhead: 20px;
  --text-subhead--line-height: 1.35;
  --text-subhead--letter-spacing: 0;
  --text-subhead--font-weight: 500;
  --text-body: 18px;
  --text-body--line-height: 1.39;
  --text-body--letter-spacing: 0;
  --text-body--font-weight: 400;
  --text-ui-nav: 16px;
  --text-ui-nav--line-height: 24px;
  --text-ui-nav--letter-spacing: 0;
  --text-ui-nav--font-weight: 400;
  --text-caption: 14px;
  --text-caption--line-height: 1.4;
  --text-caption--letter-spacing: 0;
  --text-caption--font-weight: 430;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 128px;
  --space-12: 160px;
  --container: 1360px;
  --section-gap: 128px (96px on narrow, up to 180px between major chapters);

  /* Radius */
  --radius-buttons-pills-badges-avatars-announcement-bar: 9999px;
  --radius-floating-ui-product-cards: 12px;
  --radius-large-feature-panels: 16px;
  --radius-chat-prompt-surfaces: 20px;
  --radius-tinted-accent-cards-dark-showcase-blocks: 24px;
  --radius-table-cells-tags-inline-chips: 6px;

  /* Shadows */
  --shadow-hairline: 0 0 0 1px oklab(0 0 0 / 0.05), 0 1px 1px rgba(0,0,0,0.05);
  --shadow-float-sm: 0 0 0 1px oklab(0 0 0 / 0.05), 0 4px 24px rgba(0,0,0,0.08);
  --shadow-float-lg: 0 0 0 1px oklab(0 0 0 / 0.05), 0 8px 40px rgba(0,0,0,0.10);
  --shadow-hero-drop: 0 25px 50px -12px rgba(0,0,0,0.25);
  --shadow-avatar-ring: 0 0 0 4px #ffffff;
}

Tailwind v4 theme

/* Steep — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
  --color-bg-base: #ffffff;
  --color-surface-1: #fafafb;
  --color-surface-2: #f7f7f8;
  --color-surface-3: #f2f2f3;
  --color-text-primary: #000000;
  --color-bg-inverse: #121212;
  --color-text-on-dark: #17191c;
  --color-text-muted: #777b86;
  --color-text-faint: #a3a6af;
  --color-accent-warm: #fbe1d1;
  --color-accent-cool: #d3e3fc;
  --color-link-active: #2f6fe5;
  --color-accent-ink: #5d2a1a;
  --color-border-subtle: #ececec;
  --color-background: #ffffff;
  --color-surface: #f7f7f8;
  --color-surface-raised: #ffffff;
  --color-border: #ececec;
  --color-text: #000000;
  --color-text-muted: #777b86;
  --color-primary: #121212;
  --color-primary-text: #ffffff;
  --color-accent: #fbe1d1;
  --font-display: Signifier, Spectral, 'Source Serif 4', Georgia, serif;
  --font-body: Sohne, Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --text-display: 100px;
  --text-display--line-height: 1.05;
  --text-display--letter-spacing: -0.025em;
  --text-display--font-weight: 400;
  --text-h1: 64px;
  --text-h1--line-height: 1.0;
  --text-h1--letter-spacing: -0.015em;
  --text-h1--font-weight: 400;
  --text-h2: 40px;
  --text-h2--line-height: 1.1;
  --text-h2--letter-spacing: 0;
  --text-h2--font-weight: 400;
  --text-h3: 36px;
  --text-h3--line-height: 1.07;
  --text-h3--letter-spacing: -0.018em;
  --text-h3--font-weight: 400;
  --text-lead: 22px;
  --text-lead--line-height: 1.5;
  --text-lead--letter-spacing: 0;
  --text-lead--font-weight: 400;
  --text-subhead: 20px;
  --text-subhead--line-height: 1.35;
  --text-subhead--letter-spacing: 0;
  --text-subhead--font-weight: 500;
  --text-body: 18px;
  --text-body--line-height: 1.39;
  --text-body--letter-spacing: 0;
  --text-body--font-weight: 400;
  --text-ui-nav: 16px;
  --text-ui-nav--line-height: 24px;
  --text-ui-nav--letter-spacing: 0;
  --text-ui-nav--font-weight: 400;
  --text-caption: 14px;
  --text-caption--line-height: 1.4;
  --text-caption--letter-spacing: 0;
  --text-caption--font-weight: 430;
  --radius-buttons-pills-badges-avatars-announcement-bar: 9999px;
  --radius-floating-ui-product-cards: 12px;
  --radius-large-feature-panels: 16px;
  --radius-chat-prompt-surfaces: 20px;
  --radius-tinted-accent-cards-dark-showcase-blocks: 24px;
  --radius-table-cells-tags-inline-chips: 6px;
  --shadow-hairline: 0 0 0 1px oklab(0 0 0 / 0.05), 0 1px 1px rgba(0,0,0,0.05);
  --shadow-float-sm: 0 0 0 1px oklab(0 0 0 / 0.05), 0 4px 24px rgba(0,0,0,0.08);
  --shadow-float-lg: 0 0 0 1px oklab(0 0 0 / 0.05), 0 8px 40px rgba(0,0,0,0.10);
  --shadow-hero-drop: 0 25px 50px -12px rgba(0,0,0,0.25);
  --shadow-avatar-ring: 0 0 0 4px #ffffff;
  --container-site: 1360px;
}

Steep — Style Reference

serif calm over a watercolour haze

Theme: light · Mood: light, editorial, airy, elegant, minimal, gradient

A white, almost weightless analytics site where a single high-contrast serif does all the emotional work. Oversized Signifier headlines sit centred in deep whitespace above a soft, airbrushed peach-to-lilac gradient wash; around them, product UI fragments (metric cards, line charts, an AI prompt box) float in at the page edges like cropped screenshots. Everything else is grayscale and quiet — grey nav links, a single black pill CTA, light grey panels — so the serif and the gradient carry all the personality.

Tokens — Colors

Name	Value	Token	Role
Paper White	`#ffffff`	`--bg-base`	Page background and the fill of floating product cards; dominant surface across every page.
Fog	`#fafafb`	`--surface-1`	Barely-there tint for wide section bands and the top of hero gradients.
Panel Grey	`#f7f7f8`	`--surface-2`	Default card and feature-panel fill (48px padding, 16px radius); also the secondary button fill.
Chip Grey	`#f2f2f3`	`--surface-3`	Pills, announcement bar, active nav tab background, pricing table zebra rows.
Ink	`#000000`	`--text-primary`	Headlines, nav links and body copy; the only text colour at full strength.
Carbon	`#121212`	`--bg-inverse`	Full-bleed dark sections (semantic platform) and the fill of the primary black pill CTA.
Graphite	`#17191c`	`--text-on-dark`	Text and UI elements inside dark sections; a hair warmer than pure black.
Slate Grey	`#777b86`	`--text-muted`	Subheads, footer links, table labels, chart axis labels — the standard secondary text tone.
Mist Grey	`#a3a6af`	`--text-faint`	Tertiary metadata, placeholder text in the AI prompt field, disabled states.
Blush Peach	`#fbe1d1`	`--accent-warm`	Tinted feature card background ('Built on metrics') and the warm pole of the hero gradient.
Periwinkle Data	`#d3e3fc`	`--accent-cool`	Customer-story section band and the Region/metric widget surfaces in product screenshots.
Signal Blue	`#2f6fe5`	`--link-active`	Inline links, selected-text highlight and focus rings inside product UI.
Clay Brown	`#5d2a1a`	`--accent-ink`	Text and ring stroke inside peach-tinted cards and the Registrations donut.
Hairline	`#ececec`	`--border-subtle`	Divider rules between sections and table rows; near-invisible, 1px only.

Tokens — Typography

Display: Signifier (Spectral, Source Serif 4, Georgia, serif) — weights 400
Body: Sohne (Inter, Helvetica Neue, Arial, sans-serif) — weights 400/430/450/480/500
Mono: ui-monospace (SF Mono, Menlo, monospace) — weights 400

Tokens — Radius

Element	Value
Buttons, pills, badges, avatars, announcement bar	`9999px`
Floating UI / product cards	`12px`
Large feature panels	`16px`
Chat & prompt surfaces	`20px`
Tinted accent cards, dark showcase blocks	`24px`
Table cells, tags, inline chips	`6px`

Do

Set every headline in Signifier 400 only — scale it up rather than bolding it, and tighten tracking to -0.015em to -0.025em above 60px.
Keep the nav transparent and borderless so the hero gradient runs under it.
Use the gradient wash sparingly: hero backdrops only, always with grain and always under black type at full contrast.
Crop product UI cards at the viewport edge so they read as glimpses of a live app, not as framed screenshots.
Build depth with the 1px 5% ring plus a wide soft shadow (0 8px 40px rgba(0,0,0,.1)) instead of visible borders.
Pair exactly one filled black pill with one bare-text secondary action in every CTA group.
Let sections breathe: 128px minimum between chapters, 48px padding inside large grey panels.

Don't

Don't set body copy, nav links or buttons in the serif — Söhne owns everything under 28px.
Don't add 1px grey outlines to cards; the system uses fills and rings, and only section dividers get a visible #ececec rule.
Don't introduce saturated brand colour; #fbe1d1 and #d3e3fc are the only tints, and #2f6fe5 is reserved for links and in-product UI.
Don't use drop shadows on flat feature panels — only on elements that float over another surface.
Don't crowd the hero: no more than one line of lead copy per 62 characters and never more than two headline lines.
Don't use sharp corners or radii under 6px; nothing in this system is square.
Don't colourize photography — customer imagery stays black and white.

/* Steep — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
  --color-bg-base: #ffffff;
  --color-surface-1: #fafafb;
  --color-surface-2: #f7f7f8;
  --color-surface-3: #f2f2f3;
  --color-text-primary: #000000;
  --color-bg-inverse: #121212;
  --color-text-on-dark: #17191c;
  --color-text-muted: #777b86;
  --color-text-faint: #a3a6af;
  --color-accent-warm: #fbe1d1;
  --color-accent-cool: #d3e3fc;
  --color-link-active: #2f6fe5;
  --color-accent-ink: #5d2a1a;
  --color-border-subtle: #ececec;
  --color-background: #ffffff;
  --color-surface: #f7f7f8;
  --color-surface-raised: #ffffff;
  --color-border: #ececec;
  --color-text: #000000;
  --color-text-muted: #777b86;
  --color-primary: #121212;
  --color-primary-text: #ffffff;
  --color-accent: #fbe1d1;
  --font-display: Signifier, Spectral, 'Source Serif 4', Georgia, serif;
  --font-body: Sohne, Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --text-display: 100px;
  --text-display--line-height: 1.05;
  --text-display--letter-spacing: -0.025em;
  --text-display--font-weight: 400;
  --text-h1: 64px;
  --text-h1--line-height: 1.0;
  --text-h1--letter-spacing: -0.015em;
  --text-h1--font-weight: 400;
  --text-h2: 40px;
  --text-h2--line-height: 1.1;
  --text-h2--letter-spacing: 0;
  --text-h2--font-weight: 400;
  --text-h3: 36px;
  --text-h3--line-height: 1.07;
  --text-h3--letter-spacing: -0.018em;
  --text-h3--font-weight: 400;
  --text-lead: 22px;
  --text-lead--line-height: 1.5;
  --text-lead--letter-spacing: 0;
  --text-lead--font-weight: 400;
  --text-subhead: 20px;
  --text-subhead--line-height: 1.35;
  --text-subhead--letter-spacing: 0;
  --text-subhead--font-weight: 500;
  --text-body: 18px;
  --text-body--line-height: 1.39;
  --text-body--letter-spacing: 0;
  --text-body--font-weight: 400;
  --text-ui-nav: 16px;
  --text-ui-nav--line-height: 24px;
  --text-ui-nav--letter-spacing: 0;
  --text-ui-nav--font-weight: 400;
  --text-caption: 14px;
  --text-caption--line-height: 1.4;
  --text-caption--letter-spacing: 0;
  --text-caption--font-weight: 430;
  --radius-buttons-pills-badges-avatars-announcement-bar: 9999px;
  --radius-floating-ui-product-cards: 12px;
  --radius-large-feature-panels: 16px;
  --radius-chat-prompt-surfaces: 20px;
  --radius-tinted-accent-cards-dark-showcase-blocks: 24px;
  --radius-table-cells-tags-inline-chips: 6px;
  --shadow-hairline: 0 0 0 1px oklab(0 0 0 / 0.05), 0 1px 1px rgba(0,0,0,0.05);
  --shadow-float-sm: 0 0 0 1px oklab(0 0 0 / 0.05), 0 4px 24px rgba(0,0,0,0.08);
  --shadow-float-lg: 0 0 0 1px oklab(0 0 0 / 0.05), 0 8px 40px rgba(0,0,0,0.10);
  --shadow-hero-drop: 0 25px 50px -12px rgba(0,0,0,0.25);
  --shadow-avatar-ring: 0 0 0 4px #ffffff;
  --container-site: 1360px;
}

/* Steep — CSS custom properties. Generated from style.json */
:root {
  /* Palette */
  --color-bg-base: #ffffff; /* Page background and the fill of floating product cards; dominant surface across every page. */
  --color-surface-1: #fafafb; /* Barely-there tint for wide section bands and the top of hero gradients. */
  --color-surface-2: #f7f7f8; /* Default card and feature-panel fill (48px padding, 16px radius); also the secondary button fill. */
  --color-surface-3: #f2f2f3; /* Pills, announcement bar, active nav tab background, pricing table zebra rows. */
  --color-text-primary: #000000; /* Headlines, nav links and body copy; the only text colour at full strength. */
  --color-bg-inverse: #121212; /* Full-bleed dark sections (semantic platform) and the fill of the primary black pill CTA. */
  --color-text-on-dark: #17191c; /* Text and UI elements inside dark sections; a hair warmer than pure black. */
  --color-text-muted: #777b86; /* Subheads, footer links, table labels, chart axis labels — the standard secondary text tone. */
  --color-text-faint: #a3a6af; /* Tertiary metadata, placeholder text in the AI prompt field, disabled states. */
  --color-accent-warm: #fbe1d1; /* Tinted feature card background ('Built on metrics') and the warm pole of the hero gradient. */
  --color-accent-cool: #d3e3fc; /* Customer-story section band and the Region/metric widget surfaces in product screenshots. */
  --color-link-active: #2f6fe5; /* Inline links, selected-text highlight and focus rings inside product UI. */
  --color-accent-ink: #5d2a1a; /* Text and ring stroke inside peach-tinted cards and the Registrations donut. */
  --color-border-subtle: #ececec; /* Divider rules between sections and table rows; near-invisible, 1px only. */

  /* Semantic roles */
  --background: #ffffff;
  --surface: #f7f7f8;
  --surface-raised: #ffffff;
  --border: #ececec;
  --text: #000000;
  --text-muted: #777b86;
  --primary: #121212;
  --primary-text: #ffffff;
  --accent: #fbe1d1;

  /* Typography */
  --font-display: Signifier, Spectral, 'Source Serif 4', Georgia, serif;
  --font-body: Sohne, Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --text-display: 100px;
  --text-display--line-height: 1.05;
  --text-display--letter-spacing: -0.025em;
  --text-display--font-weight: 400;
  --text-h1: 64px;
  --text-h1--line-height: 1.0;
  --text-h1--letter-spacing: -0.015em;
  --text-h1--font-weight: 400;
  --text-h2: 40px;
  --text-h2--line-height: 1.1;
  --text-h2--letter-spacing: 0;
  --text-h2--font-weight: 400;
  --text-h3: 36px;
  --text-h3--line-height: 1.07;
  --text-h3--letter-spacing: -0.018em;
  --text-h3--font-weight: 400;
  --text-lead: 22px;
  --text-lead--line-height: 1.5;
  --text-lead--letter-spacing: 0;
  --text-lead--font-weight: 400;
  --text-subhead: 20px;
  --text-subhead--line-height: 1.35;
  --text-subhead--letter-spacing: 0;
  --text-subhead--font-weight: 500;
  --text-body: 18px;
  --text-body--line-height: 1.39;
  --text-body--letter-spacing: 0;
  --text-body--font-weight: 400;
  --text-ui-nav: 16px;
  --text-ui-nav--line-height: 24px;
  --text-ui-nav--letter-spacing: 0;
  --text-ui-nav--font-weight: 400;
  --text-caption: 14px;
  --text-caption--line-height: 1.4;
  --text-caption--letter-spacing: 0;
  --text-caption--font-weight: 430;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 128px;
  --space-12: 160px;
  --container: 1360px;
  --section-gap: 128px (96px on narrow, up to 180px between major chapters);

  /* Radius */
  --radius-buttons-pills-badges-avatars-announcement-bar: 9999px;
  --radius-floating-ui-product-cards: 12px;
  --radius-large-feature-panels: 16px;
  --radius-chat-prompt-surfaces: 20px;
  --radius-tinted-accent-cards-dark-showcase-blocks: 24px;
  --radius-table-cells-tags-inline-chips: 6px;

  /* Shadows */
  --shadow-hairline: 0 0 0 1px oklab(0 0 0 / 0.05), 0 1px 1px rgba(0,0,0,0.05);
  --shadow-float-sm: 0 0 0 1px oklab(0 0 0 / 0.05), 0 4px 24px rgba(0,0,0,0.08);
  --shadow-float-lg: 0 0 0 1px oklab(0 0 0 / 0.05), 0 8px 40px rgba(0,0,0,0.10);
  --shadow-hero-drop: 0 25px 50px -12px rgba(0,0,0,0.25);
  --shadow-avatar-ring: 0 0 0 4px #ffffff;
}

{
  "$name": "Steep",
  "$source": "https://steep.app",
  "$theme": "light",
  "$generated": "inspiration library",
  "color": {
    "bg-base": {
      "$type": "color",
      "$value": "#ffffff",
      "$description": "Page background and the fill of floating product cards; dominant surface across every page."
    },
    "surface-1": {
      "$type": "color",
      "$value": "#fafafb",
      "$description": "Barely-there tint for wide section bands and the top of hero gradients."
    },
    "surface-2": {
      "$type": "color",
      "$value": "#f7f7f8",
      "$description": "Default card and feature-panel fill (48px padding, 16px radius); also the secondary button fill."
    },
    "surface-3": {
      "$type": "color",
      "$value": "#f2f2f3",
      "$description": "Pills, announcement bar, active nav tab background, pricing table zebra rows."
    },
    "text-primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Headlines, nav links and body copy; the only text colour at full strength."
    },
    "bg-inverse": {
      "$type": "color",
      "$value": "#121212",
      "$description": "Full-bleed dark sections (semantic platform) and the fill of the primary black pill CTA."
    },
    "text-on-dark": {
      "$type": "color",
      "$value": "#17191c",
      "$description": "Text and UI elements inside dark sections; a hair warmer than pure black."
    },
    "text-muted": {
      "$type": "color",
      "$value": "#777b86",
      "$description": "Subheads, footer links, table labels, chart axis labels — the standard secondary text tone."
    },
    "text-faint": {
      "$type": "color",
      "$value": "#a3a6af",
      "$description": "Tertiary metadata, placeholder text in the AI prompt field, disabled states."
    },
    "accent-warm": {
      "$type": "color",
      "$value": "#fbe1d1",
      "$description": "Tinted feature card background ('Built on metrics') and the warm pole of the hero gradient."
    },
    "accent-cool": {
      "$type": "color",
      "$value": "#d3e3fc",
      "$description": "Customer-story section band and the Region/metric widget surfaces in product screenshots."
    },
    "link-active": {
      "$type": "color",
      "$value": "#2f6fe5",
      "$description": "Inline links, selected-text highlight and focus rings inside product UI."
    },
    "accent-ink": {
      "$type": "color",
      "$value": "#5d2a1a",
      "$description": "Text and ring stroke inside peach-tinted cards and the Registrations donut."
    },
    "border-subtle": {
      "$type": "color",
      "$value": "#ececec",
      "$description": "Divider rules between sections and table rows; near-invisible, 1px only."
    }
  },
  "role": {
    "background": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "surface": {
      "$type": "color",
      "$value": "#f7f7f8"
    },
    "surface_raised": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "border": {
      "$type": "color",
      "$value": "#ececec"
    },
    "text": {
      "$type": "color",
      "$value": "#000000"
    },
    "text_muted": {
      "$type": "color",
      "$value": "#777b86"
    },
    "primary": {
      "$type": "color",
      "$value": "#121212"
    },
    "primary_text": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "accent": {
      "$type": "color",
      "$value": "#fbe1d1"
    }
  },
  "fontFamily": {
    "display": {
      "$type": "fontFamily",
      "$value": [
        "Signifier",
        "Spectral",
        "Source Serif 4",
        "Georgia",
        "serif"
      ],
      "$description": "High-contrast didone-ish serif used at a single weight (400) for every headline, hero word and card title. Italic is used for emphasis words ('Built for finance'). Never used below 36px, never bolded."
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Sohne",
        "Inter",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "$description": "Grotesk workhorse for nav, buttons, body, labels and UI chrome. The in-between weights (430/450/480) are used to nudge optical weight — treat 400 as body, 430 for buttons/subheads, 500 as the heaviest label weight."
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SF Mono",
        "Menlo",
        "monospace"
      ],
      "$description": "System mono, used only inside code/terminal screenshots and API snippets in the changelog."
    }
  },
  "typography": {
    "display": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.display}",
        "fontSize": "100px",
        "lineHeight": "1.05",
        "fontWeight": 400,
        "letterSpacing": "-0.025em"
      }
    },
    "h1": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.display}",
        "fontSize": "64px",
        "lineHeight": "1.0",
        "fontWeight": 400,
        "letterSpacing": "-0.015em"
      }
    },
    "h2": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.display}",
        "fontSize": "40px",
        "lineHeight": "1.1",
        "fontWeight": 400,
        "letterSpacing": "0"
      }
    },
    "h3": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.display}",
        "fontSize": "36px",
        "lineHeight": "1.07",
        "fontWeight": 400,
        "letterSpacing": "-0.018em"
      }
    },
    "lead": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "22px",
        "lineHeight": "1.5",
        "fontWeight": 400,
        "letterSpacing": "0"
      }
    },
    "subhead": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "20px",
        "lineHeight": "1.35",
        "fontWeight": 500,
        "letterSpacing": "0"
      }
    },
    "body": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "18px",
        "lineHeight": "1.39",
        "fontWeight": 400,
        "letterSpacing": "0"
      }
    },
    "ui-nav": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "16px",
        "lineHeight": "24px",
        "fontWeight": 400,
        "letterSpacing": "0"
      }
    },
    "caption": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "14px",
        "lineHeight": "1.4",
        "fontWeight": 430,
        "letterSpacing": "0"
      }
    }
  },
  "spacing": {
    "1": {
      "$type": "dimension",
      "$value": "4px"
    },
    "2": {
      "$type": "dimension",
      "$value": "8px"
    },
    "3": {
      "$type": "dimension",
      "$value": "12px"
    },
    "4": {
      "$type": "dimension",
      "$value": "16px"
    },
    "5": {
      "$type": "dimension",
      "$value": "20px"
    },
    "6": {
      "$type": "dimension",
      "$value": "24px"
    },
    "7": {
      "$type": "dimension",
      "$value": "32px"
    },
    "8": {
      "$type": "dimension",
      "$value": "48px"
    },
    "9": {
      "$type": "dimension",
      "$value": "64px"
    },
    "10": {
      "$type": "dimension",
      "$value": "80px"
    },
    "11": {
      "$type": "dimension",
      "$value": "128px"
    },
    "12": {
      "$type": "dimension",
      "$value": "160px"
    }
  },
  "radius": {
    "buttons-pills-badges-avatars-announcement-bar": {
      "$type": "dimension",
      "$value": "9999px"
    },
    "floating-ui-product-cards": {
      "$type": "dimension",
      "$value": "12px"
    },
    "large-feature-panels": {
      "$type": "dimension",
      "$value": "16px"
    },
    "chat-prompt-surfaces": {
      "$type": "dimension",
      "$value": "20px"
    },
    "tinted-accent-cards-dark-showcase-blocks": {
      "$type": "dimension",
      "$value": "24px"
    },
    "table-cells-tags-inline-chips": {
      "$type": "dimension",
      "$value": "6px"
    }
  },
  "shadow": {
    "hairline": {
      "$type": "shadow",
      "$value": "0 0 0 1px oklab(0 0 0 / 0.05), 0 1px 1px rgba(0,0,0,0.05)",
      "$description": "Resting state of small chips, tabs and the announcement pill — a ring rather than a shadow."
    },
    "float-sm": {
      "$type": "shadow",
      "$value": "0 0 0 1px oklab(0 0 0 / 0.05), 0 4px 24px rgba(0,0,0,0.08)",
      "$description": "Small floating product cards (Activation, Registrations) overlapping the hero gradient."
    },
    "float-lg": {
      "$type": "shadow",
      "$value": "0 0 0 1px oklab(0 0 0 / 0.05), 0 8px 40px rgba(0,0,0,0.10)",
      "$description": "Large app-screenshot panels and the AI prompt box; the signature depth cue."
    },
    "hero-drop": {
      "$type": "shadow",
      "$value": "0 25px 50px -12px rgba(0,0,0,0.25)",
      "$description": "Dark product mockups sitting on light backgrounds in product/semantic sections."
    },
    "avatar-ring": {
      "$type": "shadow",
      "$value": "0 0 0 4px #ffffff",
      "$description": "White halo around overlapping avatar bubbles and cursor chips."
    }
  },
  "component": {
    "primary-cta-black-pill": {
      "kind": "button",
      "background": "#121212",
      "color": "#ffffff",
      "border": "none",
      "radius": "9999px",
      "padding": "14px 28px",
      "font_size": "18px",
      "font_weight": 430,
      "shadow": "none",
      "hover": "background #000000; subtle opacity/scale ease 150ms",
      "notes": "Hero and nav 'Get started'. In the 64px nav it shrinks to 10px 18px / 16px. Always sits left of a text-only secondary action with 16–24px gap."
    },
    "secondary-action-bare-text": {
      "kind": "button",
      "background": "transparent",
      "color": "#000000",
      "border": "none",
      "radius": "0",
      "padding": "4px 0",
      "font_size": "18px",
      "font_weight": 400,
      "shadow": "none",
      "hover": "color #777b86",
      "notes": "'Book a demo' is unstyled text next to the pill — no border, no fill. On mobile it becomes a filled #f2f2f3 pill at full width."
    },
    "ghost-pill-filter-tab": {
      "kind": "badge",
      "background": "#f2f2f3",
      "color": "#000000",
      "border": "none",
      "radius": "9999px",
      "padding": "8px 16px",
      "font_size": "16px",
      "font_weight": 400,
      "shadow": "none",
      "hover": "background #ececec",
      "notes": "Active nav item, 'All product updates' link-button and category filters. Inactive filters are plain #777b86 text with no background."
    },
    "announcement-bar": {
      "kind": "badge",
      "background": "#f7f7f8",
      "color": "#000000",
      "border": "none",
      "radius": "9999px",
      "padding": "12px 20px",
      "font_size": "16px",
      "font_weight": 400,
      "shadow": "0 0 0 1px oklab(0 0 0 / 0.05), 0 1px 1px rgba(0,0,0,0.05)",
      "hover": "background #f2f2f3",
      "notes": "Centred above the hero headline; bell icon with a red dot on the left, right arrow → on the right, 8px gaps."
    },
    "feature-panel": {
      "kind": "card",
      "background": "#f7f7f8",
      "color": "#000000",
      "border": "none",
      "radius": "16px",
      "padding": "48px",
      "font_size": "18px",
      "font_weight": 400,
      "shadow": "none",
      "hover": "none",
      "notes": "Flat, borderless, no shadow. Title in Söhne 26px/450 at the top, illustration in the middle, 18px #777b86 copy at the bottom. The lead card in a row may swap to #fbe1d1 with 24px radius and 32px padding."
    },
    "floating-product-card": {
      "kind": "card",
      "background": "#ffffff",
      "color": "#000000",
      "border": "none",
      "radius": "12px",
      "padding": "16px",
      "font_size": "14px",
      "font_weight": 430,
      "shadow": "0 0 0 1px oklab(0 0 0 / 0.05), 0 4px 24px rgba(0,0,0,0.08)",
      "hover": "none",
      "notes": "Cropped metric widgets that bleed off the viewport edges around the hero. Keep them partially off-canvas — the crop is the point."
    },
    "prompt-input": {
      "kind": "input",
      "background": "#ffffff",
      "color": "#000000",
      "border": "none",
      "radius": "20px",
      "padding": "16px 20px",
      "font_size": "16px",
      "font_weight": 400,
      "shadow": "0 0 0 1px oklab(0 0 0 / 0.05), 0 8px 40px rgba(0,0,0,0.10)",
      "hover": "ring tightens to rgba(0,0,0,0.12)",
      "notes": "'Ask anything…' placeholder in #a3a6af, small grey icon row bottom-left, 36px circular #121212 send button with a white ↑ bottom-right."
    },
    "top-navigation": {
      "kind": "nav",
      "background": "transparent",
      "color": "#000000",
      "border": "none",
      "radius": "0",
      "padding": "0 32px",
      "font_size": "16px",
      "font_weight": 400,
      "shadow": "none",
      "hover": "link background #f2f2f3 pill",
      "notes": "Fixed, 64px tall, fully transparent with no border or backdrop blur — it floats over the gradient. Three zones: wordmark+glyph left, four centred links with 40px gaps, 'Book a demo' text + black pill right."
    }
  }
}

# Steep — Design Reference
> serif calm over a watercolour haze

**Source:** https://steep.app  
**Theme:** light  
**Category:** SaaS  
**Mood:** light, editorial, airy, elegant, minimal, gradient  
**Captured:** 2026-10-20

## Overview

A white, almost weightless analytics site where a single high-contrast serif does all the emotional work. Oversized Signifier headlines sit centred in deep whitespace above a soft, airbrushed peach-to-lilac gradient wash; around them, product UI fragments (metric cards, line charts, an AI prompt box) float in at the page edges like cropped screenshots. Everything else is grayscale and quiet — grey nav links, a single black pill CTA, light grey panels — so the serif and the gradient carry all the personality.

Technically it's a two-family system: Signifier at 64–100px with tight tracking (-0.96px to -2.5px) and 1.0–1.3 line heights for display, Söhne at 16–22px/1.35–1.5 for everything else, in weights 400–500 only. Surfaces step through #ffffff → #fafafb → #f7f7f8 → #f2f2f3 with no visible borders; depth comes from a 1px oklab hairline ring plus a wide, low-opacity drop shadow (0 8px 40px rgba(0,0,0,.1)). Radii are generous and consistent — 16/20/24px on cards, fully rounded pills on buttons and badges — and tinted accent cards (#fbe1d1 peach, #d3e3fc periwinkle) appear sparingly to break the grey. Sections are separated by 96–180px of vertical air inside a 1360px container.

## Tokens — Colors

| Name | Value | Token | Role |
|---|---|---|---|
| Paper White | `#ffffff` | `--color-bg-base` | Page background and the fill of floating product cards; dominant surface across every page. |
| Fog | `#fafafb` | `--color-surface-1` | Barely-there tint for wide section bands and the top of hero gradients. |
| Panel Grey | `#f7f7f8` | `--color-surface-2` | Default card and feature-panel fill (48px padding, 16px radius); also the secondary button fill. |
| Chip Grey | `#f2f2f3` | `--color-surface-3` | Pills, announcement bar, active nav tab background, pricing table zebra rows. |
| Ink | `#000000` | `--color-text-primary` | Headlines, nav links and body copy; the only text colour at full strength. |
| Carbon | `#121212` | `--color-bg-inverse` | Full-bleed dark sections (semantic platform) and the fill of the primary black pill CTA. |
| Graphite | `#17191c` | `--color-text-on-dark` | Text and UI elements inside dark sections; a hair warmer than pure black. |
| Slate Grey | `#777b86` | `--color-text-muted` | Subheads, footer links, table labels, chart axis labels — the standard secondary text tone. |
| Mist Grey | `#a3a6af` | `--color-text-faint` | Tertiary metadata, placeholder text in the AI prompt field, disabled states. |
| Blush Peach | `#fbe1d1` | `--color-accent-warm` | Tinted feature card background ('Built on metrics') and the warm pole of the hero gradient. |
| Periwinkle Data | `#d3e3fc` | `--color-accent-cool` | Customer-story section band and the Region/metric widget surfaces in product screenshots. |
| Signal Blue | `#2f6fe5` | `--color-link-active` | Inline links, selected-text highlight and focus rings inside product UI. |
| Clay Brown | `#5d2a1a` | `--color-accent-ink` | Text and ring stroke inside peach-tinted cards and the Registrations donut. |
| Hairline | `#ececec` | `--color-border-subtle` | Divider rules between sections and table rows; near-invisible, 1px only. |

### Semantic roles

| Role | Value |
|---|---|
| background | `#ffffff` |
| surface | `#f7f7f8` |
| surface raised | `#ffffff` |
| border | `#ececec` |
| text | `#000000` |
| text muted | `#777b86` |
| primary | `#121212` |
| primary text | `#ffffff` |
| accent | `#fbe1d1` |

## Tokens — Typography

- **Display:** Signifier (400) — fallbacks: Spectral, Source Serif 4, Georgia, serif. High-contrast didone-ish serif used at a single weight (400) for every headline, hero word and card title. Italic is used for emphasis words ('Built for finance'). Never used below 36px, never bolded.
- **Body:** Sohne (400, 430, 450, 480, 500) — fallbacks: Inter, Helvetica Neue, Arial, sans-serif. Grotesk workhorse for nav, buttons, body, labels and UI chrome. The in-between weights (430/450/480) are used to nudge optical weight — treat 400 as body, 430 for buttons/subheads, 500 as the heaviest label weight.
- **Mono:** ui-monospace (400) — fallbacks: SF Mono, Menlo, monospace. System mono, used only inside code/terminal screenshots and API snippets in the changelog.

| Role | Size | Line height | Weight | Letter spacing | Family |
|---|---|---|---|---|---|
| Display | 100px | 1.05 | 400 | -0.025em | display |
| H1 | 64px | 1.0 | 400 | -0.015em | display |
| H2 | 40px | 1.1 | 400 | 0 | display |
| H3 | 36px | 1.07 | 400 | -0.018em | display |
| Lead | 22px | 1.5 | 400 | 0 | body |
| Subhead | 20px | 1.35 | 500 | 0 | body |
| Body | 18px | 1.39 | 400 | 0 | body |
| UI / Nav | 16px | 24px | 400 | 0 | body |
| Caption | 14px | 1.4 | 430 | 0 | body |

## Tokens — Spacing & Layout

- **Base unit:** 4px
- **Density:** spacious
- **Container max width:** 1360px
- **Section gap:** 128px (96px on narrow, up to 180px between major chapters)
- **Card padding:** 32px for tinted/feature cards, 48px for large grey panels, 16px for floating UI cards
- **Scale:** 4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px, 64px, 80px, 128px, 160px

## Tokens — Radius

| Element | Value |
|---|---|
| Buttons, pills, badges, avatars, announcement bar | 9999px |
| Floating UI / product cards | 12px |
| Large feature panels | 16px |
| Chat & prompt surfaces | 20px |
| Tinted accent cards, dark showcase blocks | 24px |
| Table cells, tags, inline chips | 6px |

## Tokens — Shadows

| Name | Value | Usage |
|---|---|---|
| hairline | `0 0 0 1px oklab(0 0 0 / 0.05), 0 1px 1px rgba(0,0,0,0.05)` | Resting state of small chips, tabs and the announcement pill — a ring rather than a shadow. |
| float-sm | `0 0 0 1px oklab(0 0 0 / 0.05), 0 4px 24px rgba(0,0,0,0.08)` | Small floating product cards (Activation, Registrations) overlapping the hero gradient. |
| float-lg | `0 0 0 1px oklab(0 0 0 / 0.05), 0 8px 40px rgba(0,0,0,0.10)` | Large app-screenshot panels and the AI prompt box; the signature depth cue. |
| hero-drop | `0 25px 50px -12px rgba(0,0,0,0.25)` | Dark product mockups sitting on light backgrounds in product/semantic sections. |
| avatar-ring | `0 0 0 4px #ffffff` | White halo around overlapping avatar bubbles and cursor chips. |

## Components

### Primary CTA (black pill) (button)

| Property | Value |
|---|---|
| background | `#121212` |
| color | `#ffffff` |
| border | `none` |
| radius | `9999px` |
| padding | `14px 28px` |
| font size | `18px` |
| font weight | `430` |
| shadow | `none` |
| hover | `background #000000; subtle opacity/scale ease 150ms` |

Hero and nav 'Get started'. In the 64px nav it shrinks to 10px 18px / 16px. Always sits left of a text-only secondary action with 16–24px gap.

### Secondary action (bare text) (button)

| Property | Value |
|---|---|
| background | `transparent` |
| color | `#000000` |
| border | `none` |
| radius | `0` |
| padding | `4px 0` |
| font size | `18px` |
| font weight | `400` |
| shadow | `none` |
| hover | `color #777b86` |

'Book a demo' is unstyled text next to the pill — no border, no fill. On mobile it becomes a filled #f2f2f3 pill at full width.

### Ghost pill / filter tab (badge)

| Property | Value |
|---|---|
| background | `#f2f2f3` |
| color | `#000000` |
| border | `none` |
| radius | `9999px` |
| padding | `8px 16px` |
| font size | `16px` |
| font weight | `400` |
| shadow | `none` |
| hover | `background #ececec` |

Active nav item, 'All product updates' link-button and category filters. Inactive filters are plain #777b86 text with no background.

### Announcement bar (badge)

| Property | Value |
|---|---|
| background | `#f7f7f8` |
| color | `#000000` |
| border | `none` |
| radius | `9999px` |
| padding | `12px 20px` |
| font size | `16px` |
| font weight | `400` |
| shadow | `0 0 0 1px oklab(0 0 0 / 0.05), 0 1px 1px rgba(0,0,0,0.05)` |
| hover | `background #f2f2f3` |

Centred above the hero headline; bell icon with a red dot on the left, right arrow → on the right, 8px gaps.

### Feature panel (card)

| Property | Value |
|---|---|
| background | `#f7f7f8` |
| color | `#000000` |
| border | `none` |
| radius | `16px` |
| padding | `48px` |
| font size | `18px` |
| font weight | `400` |
| shadow | `none` |
| hover | `none` |

Flat, borderless, no shadow. Title in Söhne 26px/450 at the top, illustration in the middle, 18px #777b86 copy at the bottom. The lead card in a row may swap to #fbe1d1 with 24px radius and 32px padding.

### Floating product card (card)

| Property | Value |
|---|---|
| background | `#ffffff` |
| color | `#000000` |
| border | `none` |
| radius | `12px` |
| padding | `16px` |
| font size | `14px` |
| font weight | `430` |
| shadow | `0 0 0 1px oklab(0 0 0 / 0.05), 0 4px 24px rgba(0,0,0,0.08)` |
| hover | `none` |

Cropped metric widgets that bleed off the viewport edges around the hero. Keep them partially off-canvas — the crop is the point.

### Prompt input (input)

| Property | Value |
|---|---|
| background | `#ffffff` |
| color | `#000000` |
| border | `none` |
| radius | `20px` |
| padding | `16px 20px` |
| font size | `16px` |
| font weight | `400` |
| shadow | `0 0 0 1px oklab(0 0 0 / 0.05), 0 8px 40px rgba(0,0,0,0.10)` |
| hover | `ring tightens to rgba(0,0,0,0.12)` |

'Ask anything…' placeholder in #a3a6af, small grey icon row bottom-left, 36px circular #121212 send button with a white ↑ bottom-right.

### Top navigation (nav)

| Property | Value |
|---|---|
| background | `transparent` |
| color | `#000000` |
| border | `none` |
| radius | `0` |
| padding | `0 32px` |
| font size | `16px` |
| font weight | `400` |
| shadow | `none` |
| hover | `link background #f2f2f3 pill` |

Fixed, 64px tall, fully transparent with no border or backdrop blur — it floats over the gradient. Three zones: wordmark+glyph left, four centred links with 40px gaps, 'Book a demo' text + black pill right.

## Layout

Single centred column inside a 1360px container with generous side gutters. Heroes are symmetrically centred: announcement pill → 64–100px serif headline (2 lines, manual breaks) → 22px grey lead (max ~62ch) → button pair, then the product imagery enters. Content sections alternate between full-bleed tinted bands (#d3e3fc customer stories, #121212 semantic platform) and white sections with 128–160px vertical padding. Feature rows are 3-up equal cards with 24–32px gaps; the changelog uses a two-column split (sticky date + title left, wide screenshot right) divided by a 1px #ececec rule. Hero decoration deliberately breaks the grid — UI cards are anchored to viewport edges and clipped.

## Imagery

Two distinct registers. First, soft airbrushed mesh gradients (peach #fbe1d1 → lilac → mint → white) rendered with visible film grain, used as hero backdrops behind the serif type. Second, high-fidelity product UI: light app screenshots with blue/coral charts, avatar bubbles, named cursors and chat bubbles, plus dark terminal mockups for API content. Photography is strictly black-and-white, 16:9, documentary-style (people on bikes, office interiors) and lives inside customer-story cards. Spot illustrations are loose grey line drawings of 3D objects (speaker, gloves, rocket) sitting inside tinted feature cards. Customer logos are flat monochrome in a single centred row.

## Motion

Restrained and functional. Hero gradients drift slowly; floating UI cards and cursor chips fade/translate in with short staggered offsets on load. Hover is limited to background tint swaps on nav pills and link colour shifts to #777b86 — 150–200ms ease-out, no scale bounce. Sections reveal with a short opacity+8px rise on scroll. The arrow in '→' links nudges 2–4px right on hover.

## Responsive

Below ~900px the nav collapses to wordmark + grey 'Get started' pill + a hamburger; tapping it opens a full-screen white overlay with an X top-right, five primary links at ~28px Söhne in near-black, a two-column secondary link grid at ~18px in #777b86, and two stacked full-width pill buttons pinned to the bottom (black 'Get started' over grey #f2f2f3 'Book a demo'). The hero stays centred but the display serif drops to roughly 56–64px with the lead at 20–22px, and the two CTAs sit side by side at larger phone widths or stack full-width below that. The decorative floating cards stop being edge-anchored and instead flow into a cropped, overlapping stack under the fold. Section padding compresses from 128–160px to 64–80px, feature rows become a single column with 16px gaps, and horizontal gutters go to 20–24px.

## Do

- Set every headline in Signifier 400 only — scale it up rather than bolding it, and tighten tracking to -0.015em to -0.025em above 60px.
- Keep the nav transparent and borderless so the hero gradient runs under it.
- Use the gradient wash sparingly: hero backdrops only, always with grain and always under black type at full contrast.
- Crop product UI cards at the viewport edge so they read as glimpses of a live app, not as framed screenshots.
- Build depth with the 1px 5% ring plus a wide soft shadow (0 8px 40px rgba(0,0,0,.1)) instead of visible borders.
- Pair exactly one filled black pill with one bare-text secondary action in every CTA group.
- Let sections breathe: 128px minimum between chapters, 48px padding inside large grey panels.

## Don't

- Don't set body copy, nav links or buttons in the serif — Söhne owns everything under 28px.
- Don't add 1px grey outlines to cards; the system uses fills and rings, and only section dividers get a visible #ececec rule.
- Don't introduce saturated brand colour; #fbe1d1 and #d3e3fc are the only tints, and #2f6fe5 is reserved for links and in-product UI.
- Don't use drop shadows on flat feature panels — only on elements that float over another surface.
- Don't crowd the hero: no more than one line of lead copy per 62 characters and never more than two headline lines.
- Don't use sharp corners or radii under 6px; nothing in this system is square.
- Don't colourize photography — customer imagery stays black and white.

## Agent prompt

> Build a light, airy SaaS marketing page in the Steep style: pure #ffffff base with grey surface steps #fafafb / #f7f7f8 / #f2f2f3, black #000000 text, #777b86 for all secondary copy, and #121212 for the inverse (dark full-bleed sections and the single primary CTA). Typography is two families: Signifier (fallback Spectral/Source Serif 4, weight 400 only) for every headline — Display 100px/1.05 at -0.025em, H1 64px/1.0, H3 36px/1.07 at -0.018em, italic allowed for one emphasis word — and Söhne (fallback Inter) weights 400/430/450/500 for lead 22px/1.5, body 18px/1.39, UI and nav 16px/24px, caption 14px. Layout: 1360px max container, centred heroes (announcement pill → two-line serif headline → grey 22px lead → CTA pair), 128–160px between sections, 4px base spacing with steps 4/8/12/16/24/32/48/80/128. Radii: 9999px for all buttons, badges, avatars and the announcement bar; 12px floating UI cards; 16px large grey panels (48px padding); 20px prompt surfaces; 24px tinted cards (32px padding). Primary button = #121212 fill, white text, 14px 28px, 18px/430; secondary = plain black text, no border. Nav is fixed, 64px, fully transparent, no border or blur, centred links with pill hover (#f2f2f3). Depth comes from a 1px oklab(0 0 0 /0.05) ring plus 0 4px 24px rgba(0,0,0,.08) or 0 8px 40px rgba(0,0,0,.10) — never visible borders. The hero sits on a grainy airbrushed mesh gradient (peach #fbe1d1 → lilac → mint → white) with cropped white product cards (metric tiles, line charts, an 'Ask anything…' prompt box with a black circular ↑ button) anchored half-off the viewport edges. Use #d3e3fc for a customer-story band and #121212 for one dark showcase section; photography is strictly black and white; illustrations are loose grey line art inside tinted cards. Motion is 150–200ms ease-out opacity and small translate only. On mobile: hamburger opens a full-screen white menu with 28px links, grey secondary grid and two stacked full-width pills at the bottom; headline drops to ~56px, gutters to 20px, sections to 64–80px.

## CSS custom properties

```css
/* Steep — CSS custom properties. Generated from style.json */
:root {
  /* Palette */
  --color-bg-base: #ffffff; /* Page background and the fill of floating product cards; dominant surface across every page. */
  --color-surface-1: #fafafb; /* Barely-there tint for wide section bands and the top of hero gradients. */
  --color-surface-2: #f7f7f8; /* Default card and feature-panel fill (48px padding, 16px radius); also the secondary button fill. */
  --color-surface-3: #f2f2f3; /* Pills, announcement bar, active nav tab background, pricing table zebra rows. */
  --color-text-primary: #000000; /* Headlines, nav links and body copy; the only text colour at full strength. */
  --color-bg-inverse: #121212; /* Full-bleed dark sections (semantic platform) and the fill of the primary black pill CTA. */
  --color-text-on-dark: #17191c; /* Text and UI elements inside dark sections; a hair warmer than pure black. */
  --color-text-muted: #777b86; /* Subheads, footer links, table labels, chart axis labels — the standard secondary text tone. */
  --color-text-faint: #a3a6af; /* Tertiary metadata, placeholder text in the AI prompt field, disabled states. */
  --color-accent-warm: #fbe1d1; /* Tinted feature card background ('Built on metrics') and the warm pole of the hero gradient. */
  --color-accent-cool: #d3e3fc; /* Customer-story section band and the Region/metric widget surfaces in product screenshots. */
  --color-link-active: #2f6fe5; /* Inline links, selected-text highlight and focus rings inside product UI. */
  --color-accent-ink: #5d2a1a; /* Text and ring stroke inside peach-tinted cards and the Registrations donut. */
  --color-border-subtle: #ececec; /* Divider rules between sections and table rows; near-invisible, 1px only. */

  /* Semantic roles */
  --background: #ffffff;
  --surface: #f7f7f8;
  --surface-raised: #ffffff;
  --border: #ececec;
  --text: #000000;
  --text-muted: #777b86;
  --primary: #121212;
  --primary-text: #ffffff;
  --accent: #fbe1d1;

  /* Typography */
  --font-display: Signifier, Spectral, 'Source Serif 4', Georgia, serif;
  --font-body: Sohne, Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --text-display: 100px;
  --text-display--line-height: 1.05;
  --text-display--letter-spacing: -0.025em;
  --text-display--font-weight: 400;
  --text-h1: 64px;
  --text-h1--line-height: 1.0;
  --text-h1--letter-spacing: -0.015em;
  --text-h1--font-weight: 400;
  --text-h2: 40px;
  --text-h2--line-height: 1.1;
  --text-h2--letter-spacing: 0;
  --text-h2--font-weight: 400;
  --text-h3: 36px;
  --text-h3--line-height: 1.07;
  --text-h3--letter-spacing: -0.018em;
  --text-h3--font-weight: 400;
  --text-lead: 22px;
  --text-lead--line-height: 1.5;
  --text-lead--letter-spacing: 0;
  --text-lead--font-weight: 400;
  --text-subhead: 20px;
  --text-subhead--line-height: 1.35;
  --text-subhead--letter-spacing: 0;
  --text-subhead--font-weight: 500;
  --text-body: 18px;
  --text-body--line-height: 1.39;
  --text-body--letter-spacing: 0;
  --text-body--font-weight: 400;
  --text-ui-nav: 16px;
  --text-ui-nav--line-height: 24px;
  --text-ui-nav--letter-spacing: 0;
  --text-ui-nav--font-weight: 400;
  --text-caption: 14px;
  --text-caption--line-height: 1.4;
  --text-caption--letter-spacing: 0;
  --text-caption--font-weight: 430;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 128px;
  --space-12: 160px;
  --container: 1360px;
  --section-gap: 128px (96px on narrow, up to 180px between major chapters);

  /* Radius */
  --radius-buttons-pills-badges-avatars-announcement-bar: 9999px;
  --radius-floating-ui-product-cards: 12px;
  --radius-large-feature-panels: 16px;
  --radius-chat-prompt-surfaces: 20px;
  --radius-tinted-accent-cards-dark-showcase-blocks: 24px;
  --radius-table-cells-tags-inline-chips: 6px;

  /* Shadows */
  --shadow-hairline: 0 0 0 1px oklab(0 0 0 / 0.05), 0 1px 1px rgba(0,0,0,0.05);
  --shadow-float-sm: 0 0 0 1px oklab(0 0 0 / 0.05), 0 4px 24px rgba(0,0,0,0.08);
  --shadow-float-lg: 0 0 0 1px oklab(0 0 0 / 0.05), 0 8px 40px rgba(0,0,0,0.10);
  --shadow-hero-drop: 0 25px 50px -12px rgba(0,0,0,0.25);
  --shadow-avatar-ring: 0 0 0 4px #ffffff;
}
```

## Tailwind v4 theme

```css
/* Steep — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
  --color-bg-base: #ffffff;
  --color-surface-1: #fafafb;
  --color-surface-2: #f7f7f8;
  --color-surface-3: #f2f2f3;
  --color-text-primary: #000000;
  --color-bg-inverse: #121212;
  --color-text-on-dark: #17191c;
  --color-text-muted: #777b86;
  --color-text-faint: #a3a6af;
  --color-accent-warm: #fbe1d1;
  --color-accent-cool: #d3e3fc;
  --color-link-active: #2f6fe5;
  --color-accent-ink: #5d2a1a;
  --color-border-subtle: #ececec;
  --color-background: #ffffff;
  --color-surface: #f7f7f8;
  --color-surface-raised: #ffffff;
  --color-border: #ececec;
  --color-text: #000000;
  --color-text-muted: #777b86;
  --color-primary: #121212;
  --color-primary-text: #ffffff;
  --color-accent: #fbe1d1;
  --font-display: Signifier, Spectral, 'Source Serif 4', Georgia, serif;
  --font-body: Sohne, Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --text-display: 100px;
  --text-display--line-height: 1.05;
  --text-display--letter-spacing: -0.025em;
  --text-display--font-weight: 400;
  --text-h1: 64px;
  --text-h1--line-height: 1.0;
  --text-h1--letter-spacing: -0.015em;
  --text-h1--font-weight: 400;
  --text-h2: 40px;
  --text-h2--line-height: 1.1;
  --text-h2--letter-spacing: 0;
  --text-h2--font-weight: 400;
  --text-h3: 36px;
  --text-h3--line-height: 1.07;
  --text-h3--letter-spacing: -0.018em;
  --text-h3--font-weight: 400;
  --text-lead: 22px;
  --text-lead--line-height: 1.5;
  --text-lead--letter-spacing: 0;
  --text-lead--font-weight: 400;
  --text-subhead: 20px;
  --text-subhead--line-height: 1.35;
  --text-subhead--letter-spacing: 0;
  --text-subhead--font-weight: 500;
  --text-body: 18px;
  --text-body--line-height: 1.39;
  --text-body--letter-spacing: 0;
  --text-body--font-weight: 400;
  --text-ui-nav: 16px;
  --text-ui-nav--line-height: 24px;
  --text-ui-nav--letter-spacing: 0;
  --text-ui-nav--font-weight: 400;
  --text-caption: 14px;
  --text-caption--line-height: 1.4;
  --text-caption--letter-spacing: 0;
  --text-caption--font-weight: 430;
  --radius-buttons-pills-badges-avatars-announcement-bar: 9999px;
  --radius-floating-ui-product-cards: 12px;
  --radius-large-feature-panels: 16px;
  --radius-chat-prompt-surfaces: 20px;
  --radius-tinted-accent-cards-dark-showcase-blocks: 24px;
  --radius-table-cells-tags-inline-chips: 6px;
  --shadow-hairline: 0 0 0 1px oklab(0 0 0 / 0.05), 0 1px 1px rgba(0,0,0,0.05);
  --shadow-float-sm: 0 0 0 1px oklab(0 0 0 / 0.05), 0 4px 24px rgba(0,0,0,0.08);
  --shadow-float-lg: 0 0 0 1px oklab(0 0 0 / 0.05), 0 8px 40px rgba(0,0,0,0.10);
  --shadow-hero-drop: 0 25px 50px -12px rgba(0,0,0,0.25);
  --shadow-avatar-ring: 0 0 0 4px #ffffff;
  --container-site: 1360px;
}
```

# Steep — Style Reference
> serif calm over a watercolour haze

**Theme:** light · **Mood:** light, editorial, airy, elegant, minimal, gradient

A white, almost weightless analytics site where a single high-contrast serif does all the emotional work. Oversized Signifier headlines sit centred in deep whitespace above a soft, airbrushed peach-to-lilac gradient wash; around them, product UI fragments (metric cards, line charts, an AI prompt box) float in at the page edges like cropped screenshots. Everything else is grayscale and quiet — grey nav links, a single black pill CTA, light grey panels — so the serif and the gradient carry all the personality.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Paper White | `#ffffff` | `--bg-base` | Page background and the fill of floating product cards; dominant surface across every page. |
| Fog | `#fafafb` | `--surface-1` | Barely-there tint for wide section bands and the top of hero gradients. |
| Panel Grey | `#f7f7f8` | `--surface-2` | Default card and feature-panel fill (48px padding, 16px radius); also the secondary button fill. |
| Chip Grey | `#f2f2f3` | `--surface-3` | Pills, announcement bar, active nav tab background, pricing table zebra rows. |
| Ink | `#000000` | `--text-primary` | Headlines, nav links and body copy; the only text colour at full strength. |
| Carbon | `#121212` | `--bg-inverse` | Full-bleed dark sections (semantic platform) and the fill of the primary black pill CTA. |
| Graphite | `#17191c` | `--text-on-dark` | Text and UI elements inside dark sections; a hair warmer than pure black. |
| Slate Grey | `#777b86` | `--text-muted` | Subheads, footer links, table labels, chart axis labels — the standard secondary text tone. |
| Mist Grey | `#a3a6af` | `--text-faint` | Tertiary metadata, placeholder text in the AI prompt field, disabled states. |
| Blush Peach | `#fbe1d1` | `--accent-warm` | Tinted feature card background ('Built on metrics') and the warm pole of the hero gradient. |
| Periwinkle Data | `#d3e3fc` | `--accent-cool` | Customer-story section band and the Region/metric widget surfaces in product screenshots. |
| Signal Blue | `#2f6fe5` | `--link-active` | Inline links, selected-text highlight and focus rings inside product UI. |
| Clay Brown | `#5d2a1a` | `--accent-ink` | Text and ring stroke inside peach-tinted cards and the Registrations donut. |
| Hairline | `#ececec` | `--border-subtle` | Divider rules between sections and table rows; near-invisible, 1px only. |

## Tokens — Typography

- **Display:** Signifier (Spectral, Source Serif 4, Georgia, serif) — weights 400
- **Body:** Sohne (Inter, Helvetica Neue, Arial, sans-serif) — weights 400/430/450/480/500
- **Mono:** ui-monospace (SF Mono, Menlo, monospace) — weights 400

## Tokens — Radius

| Element | Value |
|---------|-------|
| Buttons, pills, badges, avatars, announcement bar | `9999px` |
| Floating UI / product cards | `12px` |
| Large feature panels | `16px` |
| Chat & prompt surfaces | `20px` |
| Tinted accent cards, dark showcase blocks | `24px` |
| Table cells, tags, inline chips | `6px` |

## Do

- Set every headline in Signifier 400 only — scale it up rather than bolding it, and tighten tracking to -0.015em to -0.025em above 60px.
- Keep the nav transparent and borderless so the hero gradient runs under it.
- Use the gradient wash sparingly: hero backdrops only, always with grain and always under black type at full contrast.
- Crop product UI cards at the viewport edge so they read as glimpses of a live app, not as framed screenshots.
- Build depth with the 1px 5% ring plus a wide soft shadow (0 8px 40px rgba(0,0,0,.1)) instead of visible borders.
- Pair exactly one filled black pill with one bare-text secondary action in every CTA group.
- Let sections breathe: 128px minimum between chapters, 48px padding inside large grey panels.

## Don't

- Don't set body copy, nav links or buttons in the serif — Söhne owns everything under 28px.
- Don't add 1px grey outlines to cards; the system uses fills and rings, and only section dividers get a visible #ececec rule.
- Don't introduce saturated brand colour; #fbe1d1 and #d3e3fc are the only tints, and #2f6fe5 is reserved for links and in-product UI.
- Don't use drop shadows on flat feature panels — only on elements that float over another surface.
- Don't crowd the hero: no more than one line of lead copy per 62 characters and never more than two headline lines.
- Don't use sharp corners or radii under 6px; nothing in this system is square.
- Don't colourize photography — customer imagery stays black and white.